<template>
  <div class="progress-container">
    <div class="file-info">
      <span class="file-name">{{ uploadFile.fileName }}</span>
      <span class="file-size">{{ formatSize(uploadFile.size) }}</span>
      <span class="upload-status" :class="statusClass">{{ statusText }}</span>
      
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <!-- 进行中任务的操作 -->
        <template v-if="isActive">
          <el-button 
            circle link 
            @click.stop="togglePause"
            v-if="!isPaused"
            title="暂停"
          >
            <el-icon><VideoPause /></el-icon>
          </el-button>
          
          <el-button 
            circle link 
            @click.stop="togglePause"
            v-else
            title="继续"
          >
            <el-icon><VideoPlay /></el-icon>
          </el-button>
          <el-button 
            circle link 
            @click.stop="remove"
            title="删除任务"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
        
        <!-- 已完成/失败任务的操作 -->
        <template v-if="isCompleted || isFailed">
          <el-button 
            circle link 
            @click.stop="retry"
            title="重新上传"
            v-if="isFailed"
          >
            <el-icon><Refresh /></el-icon>
          </el-button>
          
          <el-button 
            circle link 
            @click.stop="remove"
            title="删除任务"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </div>
    </div>

    <div class="progress-item" v-if="!isCompleted && !isFailed">
      <span class="label">解析进度:</span>
      <el-progress 
        :text-inside="true"
        :stroke-width="16"
        :percentage="parsePercentage"
        status="success"
      />
    </div>
    
    <div class="progress-item">
      <span class="label">上传进度:</span>
      <el-progress 
        :text-inside="true"
        :stroke-width="16"
        :percentage="uploadPercentage"
        :status="statusColor"
      />
    </div>
    
    <div class="upload-controls" v-if="isActive">
      <span v-if="isUploading" class="upload-speed">
        {{ uploadSpeed }}
      </span>
    </div>
    
    <!-- 完成信息 -->
    <div class="completed-info" v-if="isCompleted">
      <el-icon color="#67c23a"><SuccessFilled /></el-icon>
      <span>解析完成</span>
    </div>
    
    <!-- 错误信息 -->
    <div class="error-info" v-if="isFailed && uploadFile.error">
      <el-icon color="#f56c6c"><WarningFilled /></el-icon>
      <span>错误: {{ uploadFile.error }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  VideoPause, VideoPlay, Refresh, Delete,
  SuccessFilled, WarningFilled
} from "@element-plus/icons-vue"

const props = defineProps({
  uploadFile: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['pause', 'resume', 'retry', 'remove'])

// 直接从传入的uploadFile对象获取数据
const parsePercentage = computed(() => props.uploadFile.parsePercentage || 0)
const uploadPercentage = computed(() => props.uploadFile.uploadPercentage || 0)
const uploadSpeed = computed(() => props.uploadFile.uploadSpeed || '0 M/s')
const isPaused = computed(() => props.uploadFile.isPaused || false)

// 状态计算
const isActive = computed(() => 
  props.uploadFile.status === 'uploading' || props.uploadFile.status === 'paused'
)
const isCompleted = computed(() => props.uploadFile.status === 'completed')
const isFailed = computed(() => props.uploadFile.status === 'error')
const isUploading = computed(() => 
  isActive.value && uploadPercentage.value > 0 && uploadPercentage.value < 100
)

// 状态文本和样式
const statusText = computed(() => {
  if (isPaused.value) return '已暂停'
  if (isCompleted.value) return '解析完成'
  if (isFailed.value) return '解析失败'
  if (isUploading.value) return '上传中'
  return '等待中'
})

const statusClass = computed(() => {
  if (isPaused.value) return 'status-paused'
  if (isCompleted.value) return 'status-completed'
  if (isFailed.value) return 'status-error'
  if (isUploading.value) return 'status-uploading'
  return 'status-waiting'
})

const statusColor = computed(() => {
  if (isPaused.value) return 'warning'
  if (isFailed.value) return 'exception'
  if (isCompleted.value) return 'success'
  return null
})

const formatSize = (size) => {
  if (!size) return '0 B'
  const units = ["B", "KB", "MB", "GB"]
  let unitIndex = 0
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }
  return `${size.toFixed(2)} ${units[unitIndex]}`
}

const formatTime = (timestamp) => {
  if (!timestamp) return ''
  return new Date(timestamp).toLocaleTimeString()
}

const togglePause = () => {
  if (isPaused.value) {
    emit('resume', props.uploadFile)
  } else {
    emit('pause', props.uploadFile)
  }
}

const retry = () => {
  emit('retry', props.uploadFile)
}

const remove = () => {
  emit('remove', props.uploadFile.id)
}
</script>

<style scoped>
.progress-container {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 15px;
  background: #f8fafc;
  position: relative;
}

.file-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  align-items: center;
}

.file-name {
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30%;
}

.file-size {
  margin-left: 10px;
  color: #606266;
  white-space: nowrap;
  font-size: 13px;
  min-width: 70px;
}

.upload-status {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-uploading {
  background-color: #ecf5ff;
  color: #409eff;
}

.status-paused {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-completed {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.status-waiting {
  background-color: #f5f5f5;
  color: #909399;
}

.action-buttons {
  display: flex;
  gap: 5px;
  margin-left: 10px;
}

.progress-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.label {
  min-width: 80px;
  font-size: 13px;
  color: #606266;
}

.upload-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.upload-speed {
  font-size: 13px;
  color: #606266;
  margin-right: 10px;
}

.completed-info, .error-info {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 13px;
}

.completed-info {
  color: #67c23a;
}

.error-info {
  color: #f56c6c;
}

.completed-info .el-icon, .error-info .el-icon {
  margin-right: 5px;
}
</style>